<template>
	<view>
		<view class="header">
			<span class="all">全部
				<icon-svg icon-class="icon-test6" /></span>
			<span style="float:right;font-size:40rpx">
				<span style="margin-right: 15rpx;">
					<icon-svg icon-class="jiantou" /></span>
				<span id="filter" @click="handleSelect">
					<icon-svg icon-class="piliang-copy" />
				</span>
			</span>
		</view>
		<view class="search">
			<uni-search-bar placeholder="搜索标题、申请单号" radius="100"></uni-search-bar>
		</view>
		<view class="body">
			<view class="item" v-for="item in data" :key="item.id">
				<view v-if="batHandle" class="left">
					<checkbox value="cb" checked="true" />
				</view>
				<view class="left">
					<span>
						<icon-svg icon-class="ren" style="color: grey;" /></span>
				</view>
				<view class="right" @click="handleNav">
					<view class="line1">
						<span style="font-size: 16px;">{{item.person}}</span>
						<!-- <span class="noConfirm fr">{{item.noConfirm}}</span> -->
					</view>
					<view class="line2">
						<span style="">{{item.name}}</span>
						<span style="font-weight: 600;" class="fr">{{item.money}}</span>
					</view>
					<view class="line3">
						<span style="margin-right: 30rpx;">{{item.type}}</span>
						<span style="">{{item.id}}</span>
					</view>
				</view>
			</view>
		</view>
		<bianmarenTooltip :gravity="tooltipConfig.gravity" :tooltipShow="tooltipConfig.tooltipShow" :btns="tooltipConfig.tooltipBtns"
		 :eleId="tooltipConfig.eleId" @btnClick="tooltipClick" style="font-size: 30rpx;"></bianmarenTooltip>
		 <btm></btm>
	</view>
</template>

<script>
	import btm from 'pages/common/btm.vue'
	import bianmarenTooltip from '@/components/bianmaren-tooltips/bianmaren-tooltips.vue'
	export default {
		data() {
			return {
				batHandle: false,
				items: ['全部单据', '未确认单据'],
				current: 0,
				data: [
					{
					person: '陈赫斯已提交',
					name: '差旅借款',
					type: '借款单',
					id: 'j200000003',
					money: '￥5,000,00',
					noConfirm: '刚刚',
				}, {
					person: '胡凯利已提交',
					name: '差旅借款单',
					type: '申请单2020',
					id: 'j200000004',
					money: '￥803,00',
					noConfirm: '刚刚',
				}, {
					person: '孙亚龙已提交',
					name: '差旅借款单',
					type: '申请单2020',
					id: 'j200000005',
					money: '￥1,234,00',
					noConfirm: '刚刚',
				}],
				tooltipConfig: {
					distance: 30,
					eleId: 'filter',
					gravity: 'bottom',
					tooltipShow: true,
					tooltipBtns: ['点击可批量审批', '收起'],
				}
			}
		},
		methods: {
			tooltipClick() {
				this.tooltipConfig.tooltipShow = false;
			},
			handleNav() {
				uni.navigateTo({
					url: '/pages/add/currencyAccount/currencyAccount'
				})
			},
			handleSelect() {
				this.batHandle = !this.batHandle
			}
		},
		components: {
			bianmarenTooltip,
			btm
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: white;
	}

	.all {
		font-size: 35rpx;
	}

	.header {
		padding-top: 25rpx;
		height: 70rpx;
		margin: 0 auto;
		width: 80%;
	}

	.circle {
		display: inline-block;
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		background-color: #1D89E4;
		margin-right: 10rpx;
	}

	.left {
		font-size: 45rpx;
		height: 200rpx;
		line-height: 200rpx;
		vertical-align: middle;
		width: 80rpx;
		display: inline-block;
		text-align: center;
	}

	.right {
		display: inline-block;
		flex: 1;
	}

	.content {}

	.line1 {
		margin-top: 30rpx;
	}

	.line2 {
		margin-top: 20rpx;
	}

	.line3 {
		margin-top: 20rpx;
		font-size: 30rpx;
		font-weight: 200;
		color: gray;
	}

	.item {
		margin-top: 10rpx;
		padding-bottom: 20rpx;
		height: 200rpx;
		display: flex;
		padding-right: 40rpx;
		border-bottom: 1px solid #eee;
	}

	.fr {
		float: right;
	}

	.noConfirm {
		background-color: #FEF4EA;
		color: #F3901F;
		padding: 10rpx;
		font-size: 20rpx;
	}
</style>
